<template>
  <el-drawer :with-header="false" v-model="show" @close="close" class="bus_drawer" size="60%">
    <div class="layui-card busModel">
      <table-design-update v-if="isTableDesignUpdate" :bus="bus_model" :show="isTableDesignUpdate" @up-parent="upParent"
                           :storage_model="ckStorageModel"></table-design-update>
      <div class="layui-card-header">
        <span style="font-weight: bold;">存储模型(b_{{ bus_model.bus_name.replaceAll("-", "_") }})</span>
        <div style="display: inline-block;float: right">
          <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" @click="addTable">
              <i class="layui-icon layui-icon-add-1"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <div class="layui-row layui-col-space4">
          <el-empty v-if="StorageModelList.length == 0" description="暂无存储模型" :image-size="50"></el-empty>
          <div v-else class="layui-col-xs3" v-for="(item,index) in StorageModelList" :key="item.id"
               @click="storageModelUpdate(item)">
            <div :class="['entity']">
              <div class="title layui-elip">{{ item.title }}</div>
              <div class="name layui-elip">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-card busModel">
      <div class="layui-card-header">
        <span style="font-weight: bold;">表单模型</span>
        <div style="display: inline-block;float: right">
          <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
              <i class="layui-icon layui-icon-add-1"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <div class="layui-row layui-col-space4">
          <el-empty description="暂无表单模型" :image-size="50"></el-empty>
          <!--<div class="layui-col-xs3" v-for="item in 20">
            <div :class="['entity']" >
              <div class="title layui-elip">表单{{item}}</div>
            </div>
          </div>-->
        </div>
      </div>
    </div>
    <div class="layui-card busModel">
      <div class="layui-card-header">
        <span style="font-weight: bold;">流程模型</span>
        <div style="display: inline-block;float: right">
          <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
              <i class="layui-icon layui-icon-add-1"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <div class="layui-row layui-col-space4">
          <el-empty description="暂无流程模型" :image-size="50"></el-empty>
          <!--<div class="layui-col-xs3" v-for="item in 20">
            <div :class="['entity']" >
              <div class="title layui-elip">流程{item}</div>
            </div>
          </div>-->
        </div>
      </div>
    </div>
    <div class="layui-card busModel">
      <div class="layui-card-header">
        <span style="font-weight: bold;">报表模型</span>
        <div style="display: inline-block;float: right">
          <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
              <i class="layui-icon layui-icon-add-1"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <div class="layui-row layui-col-space4" style="">
          <el-empty description="暂无报表模型" :image-size="50"></el-empty>
          <!--<div class="layui-col-xs3" v-for="item in 20">
            <div :class="['entity']" >
              <div class="title layui-elip">报表{{item}}</div>
            </div>
          </div>-->
        </div>
      </div>
    </div>

  </el-drawer>
</template>
<script>
const {defineAsyncComponent} = Vue;
module.exports = {
  props: ['show', 'bus_model'],
  components: {
    "table-design-update": defineAsyncComponent(httpVueLoader('./tableDesignUpdate.vue'))
  },
  data() {
    return {
      StorageModelList: [],
      isTableDesignUpdate: false,
      ckStorageModel: {}
    }
  },
  methods: {
    close() {
      this.show = false;
      this.$emit('update_is_bus_model_manage');
    }
    , addTable() {
      this.$emit('add_table', this.bus_model.id);
    }
    , upParent(data, event) {
      console.log(this.$refs,"0000");
      this[data.key] = data.value;
      if (event != undefined && event != null) {
        eval(event.eval);
      }
    }
    , async getStorageModelList() {
      let data = await layui.common.ajax({
        url: apiUrlConfig.storageModel.getListAll,
        data: {
          busId: this.bus_model.id
        },
        contentType: 'application/x-www-form-urlencoded'
      })
      this.StorageModelList = data.data;
    }
    , storageModelUpdate(item) {
      this.isTableDesignUpdate = true;
      this.ckStorageModel = item;
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.getStorageModelList();
      }
    }
  },
  mounted() {
    this.getStorageModelList()
  },
}
</script>
<style scoped>

.busModel .entity {
  padding: 10px 0px 10px 0px;
}

.bus_drawer .el-drawer__body {
  padding: 5px;
}
</style>
